<!--
 * @Author: your name
 * @Date: 2020-03-04 16:14:58
 * @LastEditTime: 2020-04-08 13:57:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \imooc-hybrid-web\src\views\Main.vue
 -->
<template>
  <!-- 在 vue 这种单页面的应用程序中，它只存在一个页面——App.vue， 其他的都是组件 -->
  <div class="main">
    <keep-alive>
      <!-- 动态组件 -->
      <component :is="currentComponent"></component>
    </keep-alive>
    <tool-bar ref="toolBar" @onChangeFragment="onChangeFragment"></tool-bar>
  </div>
</template>

<script>
import toolBar from '@c/currency/ToolBar.vue'
export default {
  name: 'imooc',
  components: {
    'tool-bar': toolBar,
    // 异步组件引入方式， 异步组件：只有在需要展示该组件时才会把组件进行渲染
    home: () => import('@c/Home'),
    shopping: () => import('@c/Shopping'),
    my: () => import('@c/My')
  },
  data: function () {
    return {
      currentComponent: 'home'
    }
  },
  activated: function () {
    // 在 keepAlive 被激活的时侯， 调用指定加载页面组件的方法
    this.pushFragment()
  },

  methods: {
    // 组件切换
    onChangeFragment: function (componentName) {
      this.currentComponent = componentName
    },
    /**
     * 指定加载的页面组件
     */
    pushFragment: function () {
      // 获取到组件加载的下标
      const componentIndex = this.$route.params.componentIndex
      // 如果没有下标的话， 直接让方法 return 掉
      if (componentIndex === undefined) return
      // 通过 toolbar 来切换对应的组件
      this.$refs.toolBar.pushFragment(componentIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
